<template>
	<view class="page-wraper">
		<customNav title1="我要报价" bgColor="#3957BF" :backIcon="true" backIconColor="white">
		</customNav>
		
		<view class="" style="background-color: #3957BF; width:100%; height:30px">
		</view>
		
		<view class="up_card">
			<view class="" style="height: 10px;"></view>
			<view class="price_title_view">
				<text class="title">车辆信息</text>
			</view>
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						* 求购车型
					</view>
					<view class="cell_right" style="text-align: right; flex-direction: column; display: flex;">
						<text class="content_text">别克GL8 23款 陆上公务舱 智享</text>
						<text class="small_text">指导价：24.29万</text>
					</view>
				</view>
				<view class="cell_line"></view>
			</view>
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						* 我的报价
					</view>
					<view class="cell_right" style="">
						<input v-model="realName" type="text" placeholder="请输入金额" placeholder-class="placeholder_text" style="text-align: right;">
					</view>
					<text class="unit_text">万元</text>
				</view>
				<view class="cell_line"></view>
			</view>
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						* 订金
					</view>
					<view class="cell_right" style="">
						<input v-model="realName" type="text" placeholder="请输入金额" placeholder-class="placeholder_text" style="text-align: right;">
					</view>
					<text class="unit_text">元</text>
				</view>
				<view class="cell_line"></view>
			</view>

			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						* 车源所在地
					</view>
					<view @click="openDrawer('regionDrawer', 'region')" class="cell_right" style="">
						<input v-model="regionResult" type="text" disabled="false" class="content_text" placeholder="选择地区" placeholder-class="placeholder_text" style="text-align: right;">
					</view>
				</view>
				<view class="cell_line"></view>
			</view>
			
			<view class="cell">
				<uniSendCar :title="'* 车源联系人'" :isShowLeftImg='false' :isShowInput='false' @selectClick='selectClick()' :inta="4"
					:selectName="selectCarAge">
				</uniSendCar>
				<!-- <view class="cell_content">
					<view class="cell_title" style="flex:1;">
						* 报价联系人
					</view>
					<view class="cell_right" style="" @click="selectedConnact()">
						<input v-model="realName" type="text" disabled="false" placeholder="请输入金额" placeholder-class="placeholder_text" style="text-align: right;">
					</view>
				</view> -->
			</view>
		</view>
		
		<view class="down_card">
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						自提距离
					</view>
					<view @click="openDrawer('distanceDrawer')" class="cell_right" style="">
						<input v-model="distanceResult" type="text" disabled="false" class="content_text" placeholder="请选择" placeholder-class="placeholder_text" style="text-align: right;">
					</view>
				</view>
				<view class="cell_line"></view>
			</view>
			
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						开票类型
					</view>
					<view class="cell_right" style="flex-direction: row; display: flex;">
						<view class="">
							<uni-data-checkbox mode="tag" v-model="radio2" :localdata="kaipiaoList" selectedColor="#EDF1FF" selectedTextColor="#0E59EA"></uni-data-checkbox>
						</view>
					</view>
				</view>
				<view class="cell_line"></view>
			</view>
			
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						发票
					</view>
					<view class="cell_right" style="flex-direction: row; display: flex;">
						<view class="">
							<uni-data-checkbox mode="tag" v-model="radio2" :localdata="faPiaoList" selectedColor="#EDF1FF" selectedTextColor="#0E59EA"></uni-data-checkbox>
						</view>
					</view>
				</view>
				<view class="cell_line"></view>
			</view>
			
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						手续
					</view>
					<view class="cell_right" style="flex-direction: row; display: flex;">
						<view class="">
							<uni-data-checkbox mode="tag" v-model="radio2" :localdata="shouxuList" selectedColor="#EDF1FF" selectedTextColor="#0E59EA"></uni-data-checkbox>
						</view>
					</view>
				</view>
				<view class="cell_line"></view>
			</view>
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						要求
					</view>
					<view class="cell_right" style="flex-direction: row; display: flex;">
						<view class="">
							<uni-data-checkbox mode="tag" v-model="radio2" :localdata="requestList" selectedColor="#EDF1FF" selectedTextColor="#0E59EA"></uni-data-checkbox>
						</view>
					</view>
				</view>
				<view class="cell_line"></view>
			</view>
			
			<view class="cell">
				<view class="cell_content">
					<view class="cell_title" style="flex:1;">
						备注
					</view>
				</view>
			</view>
			<!-- <view class="" style=" height: auto; flex-direction: column; display: flex;"> -->
				<textarea class="textarea" value="" placeholder="请输入" placeholder-class="placeholder_text" />
			<!-- </view> -->
		</view>
		
		
		
		<!-- 抽屉 -->
		
		
		<uni-drawer ref="regionDrawer" mode="right" :mask-click="true" @change="change($event,'regionDrawer')">
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<view class="drawer-title">{{regionTitle}}</view>
					<view @click="selectedItem(item, 'regionDrawer')" class="info-content" v-for="item in regionList.length" :key="item">
						<text>{{regionList[item-1]}}</text>
					</view>
				</scroll-view>
			</view>
		</uni-drawer>
		
		<uni-drawer ref="distanceDrawer" mode="right" :mask-click="true" @change="change($event,'distanceDrawer')">
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<view class="drawer-title">{{distanceTitle}}</view>
					<view @click="selectedItem(item, 'distanceDrawer')" class="info-content" v-for="item in distanceList.length" :key="item">
						<text>{{distanceList[item-1]}}</text>
					</view>
				</scroll-view>
			</view>
		</uni-drawer>
		

		
	
	</view>
</template>

<script>
	import customNav from "@/components/custom-nav/custom-nav.vue";
	import cssArcBackground from "@/components/cssArcBackground/cssArcBackground.vue";
	import addressSearch from "@/components/addressSearch/addressSearch.vue";
	export default {
		components: {
			customNav,
			addressSearch,
			cssArcBackground
		},
		data() {
			return {
				offerList: [{},{},{},{}],
				notes:["","", "","", ""],
				
				// 抽屉
				showRight: false,
				
				// 抽屉信息
				regionList: ["东区", "南区", "西区", "北区"],
				distanceList: ["100公里内", "300公里内", "500公里内", "500公里外"],
				// 抽屉结果
				regionResult: "",
				distanceResult: "",
				// 抽屉title
				regionTitle:'车源所在地',
				distanceTitle: "自提距离",
				
				requestList: [{
					text: '本人到店',
					value: 0
				}, {
					text: '无需本人',
					value: 1
				}],
				
				shouxuList: [{
					text: '票证随车',
					value: 0
				}, {
					text: '票证不随车',
					value: 1
				}],
				
				faPiaoList: [{
					text: '店票',
					value: 0
				}, {
					text: '汽贸票',
					value: 1
				}],
				
				kaipiaoList: [{
					text: '普票',
					value: 0
				}, {
					text: '增票',
					value: 1
				}],
				

				
				
				
			}
		},
		onLoad() {

		},
		methods: {
			
			checkboxBtn() {
				
			},
			
			// 抽屉
			
			selectedItem(item, e) {
				if (e == 'regionDrawer') {
					this.regionResult = this.regionList[item-1]	
				}
				else if (e == 'distanceDrawer') {
					this.distanceResult = this.distanceList[item-1]
				}
				
				this.closeDrawer(e)
				
			},
			
			enterCustomJob() {
				if (this.customJobTitle) {
					this.jobTitle = this.customJobTitle
				}
				this.closeDrawer('regionDrawer')
			},
			
			openDrawer(e, type) {
				this.$refs[e].open()
			
			},
			
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			
			// 抽屉状态发生变化触发
			// change(e, type) {
			// 	console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
			// 	this[type] = e
			// },
		}
	}
</script>

<style>
	
	.textarea {
		margin-bottom: 50px;
		margin-left: 14px;
		margin-right: 14px;
		height: 64px;
		border: 1px solid lightgray;
		border-radius: 7px;
	}
	
	.selected_btn {
		background: #EDF1FF;
		opacity: 1;
		border-radius: 14px;
		font-size: 12px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #0E59EA;
		opacity: 1;
		padding: 5px 14px 5px 14px;
	}
	
	.normal_btn {
		border: 1px solid lightgray;
		border-radius: 14px;
		
		font-size: 12px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1C2125;
		opacity: 1;
		padding: 5px 14px 5px 14px;
	}
	
	/* 抽屉 */
	.drawer-title {
		margin-bottom: 10px;
		width: 100%;
		height: 40px;
		background-color: #0E59EA;
		border-radius: 0px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: white;
		opacity: 1;
		padding-left: 15px;
		display: flex;
		align-items: center;
	}
	
	.job-custom {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.job-custom-btn {
		margin-left: 5px;
		margin-right: 15px;
		width: 50px;
		height: 30px;
		background: #0E59EA;
		border-radius: 7px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.example-body {
		padding: 10px;
	}
	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex:1
	}
	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.info {
		padding: 15px;
		color: #666;
	}
	
	.info-text {
		font-size: 14px;
		color: #666;
	}
	.info-content {
		padding-left: 15px;
		height: 45px;
		display: flex;
		align-items: center;
		
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000026;
		opacity: 1;
	}
	.close {
		padding: 10px;
	}
	
	/**/
	
	.content_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}
	
	.small_text {
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		opacity: 1;
	}
	
	.unit_text {
		margin-left: 5px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FD1212;
		opacity: 1;
	}
	
	.cell_title {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	
	.cell_right {
	
	}
	
	.cell_line {
		margin-left: 15px;
		margin-right: 15px;
		border: 1px solid #00000004;
	}
	
	.placeholder_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	
	.cell {
		display: flex;
		flex-direction: column;
		/* background-color: red; */
	}
	
	.cell_content {
		display: flex;
		flex-direction: row;
		height: 60px;
		align-items: center;
		margin-left: 14px;
		margin-right: 14px;
		/* background-color: red; */
	}
	
	.placeholder_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	
	.up_card {
		margin-top: -10px; 
		background-color: white;
		/* height:100px; */
		height: auto;
		width:100%; 
		border-radius: 14px 14px 0px 0px;

	}
	
	.down_card {
		margin-top: 10px; 
		background-color: white;
		/* height:100px; */
		height: auto;
		width:100%; 
	
	}
	
	.title {
		font-size: 15px;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		font-family: Alimama ShuHeiTi;
	}
	
	.price_title_view {
		width: 150rpx;
		/* margin-top: 34rpx; */
		margin-left: 30rpx;
		margin-bottom: 42rpx;
		background: url(/static/bac-small.png);
		background-size: 100% 100%; //背景图片能够显示全
	}
	
	.page-wraper {
		position: absolute;
		top: 0px;
		height: 100%;
		width: 100%;
		background-color: #F2F2F2;
	}
	
</style>